<template>
  <div>
    <navigationTitle></navigationTitle>
    <div id="login_bg"></div>
    <div id="logoin_content">
      <img src="https://dummyimage.com/100x100/3aa900" alt id="logo">
      <div class="input-cont">
        <div class="iconfont icon-yonghu"></div>
        <div class="type">{{language.user}}</div>
        <input type="text" v-model="info.username">
      </div>
      <div class="input-cont">
        <div class="iconfont icon-iconfontmima"></div>
        <div class="type">{{language.password}}</div>
        <input type="password" v-model="info.password">
        <a href="/pages/user/forget/main" class="forget_password">{{language.forget_password}}</a>
      </div>
      <button id="login_post" @click="login_post">{{language.login_btn}}</button>
      <div class="signup-subheader">{{language.signup_subheader}}</div>
      <a href="/pages/user/register/main" class="signup-button">{{language.signup_button}}</a href="/Register">
      <!-- <picker @change="bindChange" mode="selector" :value="picindex" :range="picarr">
        <view class="picker">{{picarr[picindex]}}</view>
      </picker> -->
    </div>
  </div>
</template>

<script>
import navigationTitle from "@/components/navigationTitle";

export default {
  data() {
    return {
      picarr: ["中文", "英文"],
      picindex: 0,
      language: {
        user: this.$t("message.signin_username_hint_text"),
        password: this.$t("message.signin_password_label"),
        login_btn: this.$t("message.signin_button_login"),
        forget_password: this.$t("message.signin_forget_password_title"),
        signup_subheader: this.$t("message.signup_subheader"),
        signup_button: this.$t("message.signup_button")
      },
      info: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login_post() {
      let _this = this;
      if (!_this.info.username || _this.info.username.length < 5) {
        _this.$store.state.showToast(this.$t("message.error_username_length"))
        return;
      }
      if (!_this.info.password) {
        _this.$store.state.showToast(this.$t("message.enter_a_password"))
        return;
      }
      if ( _this.info.password.length < 8) {
        _this.$store.state.showToast(this.$t("message.error_password_length"))
        return;
      }
      _this.$request({
        url: 'api/e/app/token/',
        data: _this.info,
      }).then((res)=>{
        console.log(res)
      })
    },
    // bindChange(e) {
    //   console.log(e);
    //   this.picindex = e.target.value;
    //   this.$i18n.locale = this.picindex == 0 ? "CN" : "EN";
    //   this.language = {
    //     user: this.$t("message.signin_username_hint_text"),
    //     password: this.$t("message.signin_password_label"),
    //     login_btn: this.$t("message.signin_button_login"),
    //     forget_password: this.$t("message.signin_forget_password_title"),
    //     signup_subheader: this.$t("message.signup_subheader"),
    //     signup_button: this.$t("message.signup_button")
    //   };
    // }
  },
  computed: {},
  components: {
    navigationTitle
  },

  onLoad() {
    let _this = this;
    // console.log(this.$i18n, this.language.login_btn);
    _this.$store.state.navigation.color = false;
    _this.$store.state.navigation.title = '';
    _this.$store.state.navigation.icon = '';
  }
};
</script>

<style scoped lang="less">
@import url("../../../utils/public-color.less");

#login_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 178vw;
  z-index: 0;
  background: url("http://files.liujunjun.top/mini-program/Layer14.png") no-repeat;
  background-size: cover;
}
#logoin_content {
  position: relative;
  z-index: 1;
}

#logo {
  width: 30vw;
  height: 30vw;
  margin: 31vw - @page_padding_top auto 24vw;
  display: block;
  position: relative;
}
.input-cont {
  width: 93vw;
  position: relative;
  margin: 0 auto 6vw;
  padding-left: 16vw;
  box-sizing: border-box;
  border-bottom: .2vw solid #ccc;
  .iconfont {
    font-size: 6vw;
    color: @font_color;
    position: absolute;
    top: 0;
    left: 4vw;
  }
  .type {
    font-size: 3vw;
    color: @font_color;
  }
  input {
    height: 12.222vw;
    width: 100%;
  }
  a {
    position: absolute;
    right: 5.8vw;
    bottom: 3.4vw;
    font-size: 2.778vw;
  }
}
#login_post {
  width: 86.852vw;
  height: 14.722vw;
  line-height: 14.722vw;
  background-image: linear-gradient(0deg, #37a000 0%, #43c101 100%),
    linear-gradient(#f31541, #f31541);
  background-blend-mode: normal, normal;
  border-radius: 7.5vw;
  display: block;
  margin: 0 auto;
  font-size: 4.444vw;
  letter-spacing: 0.222vw;
  color: #ffffff;
}
.signup-subheader {
  margin-top: 13.704vw;
  text-align: center;
	letter-spacing: 0.139vw;
	color: @font_color;
}
.signup-button{
	font-size: 4.074vw;
	line-height: 4.62vw;
  letter-spacing: 0.204vw;
	color: @font_color;
  text-align: center;
  margin-top: 3.88vw;  
}
</style>

